<script lang="ts" setup>
import { ref, useTemplateRef, onMounted } from 'vue';
import { useAppStore } from '@/mobile/stores/app';
import { onClickOutside } from '@vueuse/core';
import { useFetch } from '@/mobile/hooks/fetch';
import { useAsyncData } from '@/mobile/hooks/async-data';

const appStore = useAppStore();
const { $fetch } = useFetch();
const mask = ref(false);
const menuOpen = ref(false);

const openMenu = () => {
  menuOpen.value = true;
  mask.value = true;
}

const closeMenu = () => {
  menuOpen.value = false;
  mask.value = false;
}

const menuRef = useTemplateRef('menu');

onClickOutside(menuRef, () => {
  closeMenu();
});

const { data: menubarItems } = useAsyncData('header:menubar', () => $fetch('/toolbar/queryToolbarListByCommunityId'));

const elRef = useTemplateRef('el');
const parentEl = ref<HTMLElement | null | undefined>();

onMounted(() => {
  parentEl.value = elRef.value?.parentElement;
});
</script>

<template>
  <section class="page-header-menu flex flex-shrink-0 items-stretch" v-bind="$attrs" ref="el">
    <button type="button" class="bg-transparent px-10" @click="openMenu">
      <div class="i-icons:menu size-20"></div>
    </button>
  </section>

  <Transition
    enter-active-class="transition-width"
    leave-active-class="transition-width"
    enter-from-class="w-0"
    leave-to-class="w-0"
    enter-to-class="w-260"
    leave-from-class="w-260"
  >
    <div class="fixed bottom-0 left-0 top-0 z-110 overflow-hidden border-width-1 border-#F7F7F7 border-solid bg-white text-14 color-text-2 shadow-[0_6px_10px_0_rgba(0,0,0,0.05)]" ref="menu" v-if="menuOpen">
      <div class="h-full w-260 flex flex-col">
        <div class="h-48 flex flex-shrink-0 items-stretch justify-between">
          <div class="mx-20 my-10 flex-grow">
            <img :src="appStore.config.logo" class="block h-full" :alt="appStore.config.name" v-if="appStore.config.logo">
          </div>
          <div class="flex-y-center flex-shrink-0">
            <button type="button" class="h-full bg-transparent px-15 text-#28303F" @click="closeMenu">
              <div class="i-icons:arrow-left size-16"></div>
            </button>
          </div>
        </div>
        <div class="flex-grow overflow-auto border-t-width-1 border-t-#F7F7F7 border-solid pb-[env(safe-area-inset-bottom)]">
          <ul class="px-20 py-12">
            <li class="flex items-center">
              <RouterLink class="my-10 break-anywhere font-medium leading-36 no-underline focus-visible:outline-unset" :class="{ 'text-color-primary-1': $route.path === '/' }" to="/">
                {{ $t('common.header.nav1') }}
              </RouterLink>
            </li>
            <li class="flex items-center" v-for="item in menubarItems" :key="item.barId">
              <a :href="item.jumpUrl" target="_blank" class="my-10 break-anywhere font-medium leading-36 no-underline focus-visible:outline-unset">
                {{ item.barName }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </Transition>

  <Teleport defer :to="parentEl" v-if="parentEl">
    <Transition
      enter-active-class="transition-opacity"
      leave-active-class="transition-opacity"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
    >
      <div class="fixed bottom-0 left-0 right-0 top-0 z-90 bg-[rgba(0,0,0,0.20)]" v-if="mask"></div>
    </Transition>
  </Teleport>
</template>

<style lang="scss" scoped>
</style>
